<template>
	<view>
		<view class="companyInfo">
			<view>
				管理员：{{userInfo.company_no}}
			</view>
			<view>
				<view class="linkTxt" @click="quitLogin">退出</view>
			</view>
		</view>
		<view class="uni-padding-wrap">
			<view class="headerTitle">
				{{company}}每日员工统计
			</view>
			<view class="uni-flex uni-column table-content">
				<view class="uni-flex uni-row table-header">
					<view class="flex-item table-column" style="width: 50%;">日期</view>
					<view class="flex-item table-column" style="width: 25%;">员工数量</view>
				</view>
				<view v-if="json_data.length > 0" class="flex-item flex-item-V" v-for="(item, index) in json_data" v-bind:key="index">

					<view class="uni-flex uni-row table-body">
						<view class="flex-item table-column" style="width: 50%;">{{item.dateF}}</view>
						<view class="flex-item table-column linkTxt" style="width: 25%;">
						{{item.data}}
						</view>
					</view>
				</view>
				<view v-if="json_data.length === 0" class="table-body" style="text-align: center;">
					暂无数据
				</view>
			</view>
			<view class="pageList">
				<uni-pagination :total="total" :current="page" :pageSize="size" @change="changePage"></uni-pagination>
			</view>
			<view class="pageDesc">第{{page}}页，总共{{total}}条，每页{{size}}条</view>
		</view>
	</view>
</template>

<script>
	import uniPagination from '@dcloudio/uni-ui/lib/uni-pagination/uni-pagination.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import moment from 'moment';
	
	export default {
		components: {
			uniPagination
		},
		
		onLoad: function(option) {
			console.log(option.company);
			this.company = option.company || '';
		},
		data() {
			return {
				total: 0,
				page: 1,
				historyPage:1,
				size: 10,
				formData: {},
				json_data: [],
				company:''
			}
		},
		onLoad: function(option) {
			console.log(option.p);
			this.historyPage = option.p || 1;
			this.company = option.company || '';
		},
		computed: mapState(['hasLogin', 'userInfo']),
		methods: {
			...mapMutations(['logout']),
			quitLogin: function() {
				this.logout();
				uni.navigateTo({
					url: '../../user/login'
				});
			},
			historyBack() {
				uni.navigateTo({
					url: 'enterprise?p='+this.historyPage
				});
			},
			changePage: function(e) {
				this.page = e.current;
				this.formData.page = e.current;
				this.formData.company = this.company;
				this.get();
			},
			get() {
				uni.showLoading({
					title: '处理中...'
				})
				uniCloud.callFunction({
					name: 'company_accout_stat',
					data: this.formData
				}).then((res) => {
					console.log(res)
					uni.hideLoading()
					const resData = res.result || {};
					const arr = resData.data || [];
					for (var i = 0, len = arr.length; i < len; i += 1) {
						arr[i].dateF = moment(arr[i]._id).format('YYYY-MM-DD');
					}
					this.json_data = arr;
					this.total = resData.total || 0;
					this.page = resData.page || 1;
				}).catch((err) => {
					console.log(err);
					uni.hideLoading()
					uni.showModal({
						content: `查询失败，错误信息为：${err.message}`,
						showCancel: false
					})
				})
			}
		},
		onShow() {
			console.log('用户信息：', this.userInfo);
			if (this.hasLogin) {if (this.userInfo.super == 1) {
					this.formData = {
						page: this.page,
						size: this.size,
						company:this.company
					};
					this.get();
				} else {
					uni.navigateTo({
						url: '../stat/stat'
					});
				}
			} else {
				this.quitLogin();
			}
		}
	}
</script>

<style>
	.headerTitle{
		font-size: 18px;
		text-align: center;
		margin-top: 10px;
	}
	
	.linkTxt {
		color: #007aff;
		display: inline;
	}
	
	.companyInfo {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
	}

	.uni-form-item .title {
		padding: 14rpx 0;
		width: 180rpx;
		text-align: right;
		background-color: #FFFFFF;
	}

	.table-content {
		padding: 10rpx 0;
	}

	.table-column {
		text-align: center;
		line-height: 40rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.table-header {
		justify-content: space-between;
		color: #909399;
		background-color: #FFFFFF;
		border-top: 1px solid #ebeef5;
		border-bottom: 1px solid #ebeef5;
		padding: 18rpx 0;
	}

	.table-body {
		justify-content: space-between;
		background-color: #FFFFFF;
		border-bottom: 1px solid #ebeef5;
		padding: 10rpx 0;
		color: #888888;
	}

	.pageList {
		background-color: #FFFFFF;
		margin-top: 20rpx;

	}

	.pageDesc {
		text-align: center;
		margin-top: 10rpx;
		margin-bottom: 40rpx;
		font-size: 14px;
	}
</style>
